<template>
    <div>

  
      <!-- 问卷结果列表 -->
      <pro-table
        :columns="columns"
        :request="fetchQuestionnaireResultData"
        row-key="id"
        :pagination="pagination"
        :action-ref="setActionRef"
        header-title="问卷结果管理"
      >
        <template #operation="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <a-button type="text" @click="handleDetail(record)">详情</a-button>
          </template>
        </template>
      </pro-table>
  
      <!-- 问卷结果详情弹窗 -->
      <a-modal v-model:visible="detailVisible" title="问卷结果详情">
        <p>评分：{{ detail?.score }}</p>
        <p>评价时间：{{ detail?.createTime }}</p>
        <p>服务单号：{{ detail?.serviceNo }}</p>
        <p>下单时间：{{ detail?.demandCreateTime }}</p>
        <p>服务产品类型：{{ detail?.productType }}</p>
        <p>收费类型：{{ detail?.chargeType }}</p>
        <p>问卷项列表：</p>
        <a-table :columns="detailColumns" :data-source="detail?.itemList">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'content'">
              {{ record.content }}
            </template>
          </template>
        </a-table>
      </a-modal>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, Ref } from 'vue';
  import { getQuestionnaireResultList, getQuestionnaireResultDetail } from '@/api/questionnaire'; // 假设你有一个获取问卷结果数据的API
  
  export default defineComponent({
    name: 'QuestionnaireResultManagement',
    setup() {
      // 筛选条件
      const filter = ref({
        productType: '',
        chargeType: '',
        serviceNo: '',
      });
  
      // 表格列定义
      const columns = [
        { title: 'ID', dataIndex: 'id' },
        { title: '评分', dataIndex: 'score' },
        { title: '评价时间', dataIndex: 'createTime', valueType: 'date' },
        { title: '服务单号', dataIndex: 'serviceNo' },
        { title: '下单时间', dataIndex: 'demandCreateTime', valueType: 'date' },
        { title: '服务产品类型', dataIndex: 'productType', valueEnum: {
          1: '保洁',
          2: '搬家',
          3: '保养',
          4: '维修',
        } },
        { title: '收费类型', dataIndex: 'chargeType', valueEnum: {
          1: '面客订单',
          2: '内部员工',
          3: '家装订单',
          4: '保内',
          5: '保外',
          6: '内部结算订单',
        } },
        { title: '操作', dataIndex: 'operation', slotName: 'operation', hideInSearch: true },
      ];
  
      // 详情表格列定义
      const detailColumns = [
        { title: '标题', dataIndex: 'title' },
        { title: '选项', dataIndex: 'content' },
      ];
  
      // 分页配置
      const pagination = ref({
        current: 1,
        pageSize: 10,
        total: 0,
      });
  
      // 问卷结果详情
      const detailVisible = ref(false);
      const detail = ref({
        id: '',
        score: '',
        createTime: '',
        serviceNo: '',
        demandCreateTime: '',
        productType: '',
        chargeType: '',
        itemList: [],
      });
  
      // 处理查询
      const handleSearch = () => {
        actionRef.value.reload();
      };
  
      // 处理重置
      const handleReset = () => {
        filter.value = {
          productType: '',
          chargeType: '',
          serviceNo: '',
        };
        actionRef.value.reload();
      };
  
      // 处理详情查看
      const handleDetail = async (record) => {
        const response = await getQuestionnaireResultDetail(record.id);
        detail.value = response;
        console.log(detail.value);
        detailVisible.value = true;
      };
  
      // 获取问卷结果数据
      const fetchQuestionnaireResultData = async (params: {
        current: number;
        pageSize: number;
      }) => {
        const response = await getQuestionnaireResultList({
          ...params,
          ...filter.value,
        });
        pagination.value.total = response.total;
        return {
          data: response.list,
          success: true,
          total: response.total,
        };
      };
  
      // 设置actionRef
      const actionRef = ref();
      const setActionRef = (ref: Ref) => {
        actionRef.value = ref;
      };
  
      return {
        filter,
        columns,
        detailColumns,
        pagination,
        detailVisible,
        detail,
        handleSearch,
        handleReset,
        handleDetail,
        fetchQuestionnaireResultData,
        setActionRef,
      };
    },
  });
  </script>